﻿
@{
    ViewData["Title"] = "Process";
    Layout = "~/Views/Shared/MyMasterPage.cshtml";
}

<link href="~/css/timeline.css" rel="stylesheet" />
<script src="~/js/modernizr.js"></script>
<div id="news">
    <!-- banner-area -->
    <section class="banner-section">
        <div class="section-bg" style="background-image: url('assets/img/parallax.jpg');"></div>
        <div class="container">
            <div class="row">
                <div class="page-banner-content col">
                    <h1 class="text-white">公司发展历程</h1>
                    <span>奔达摩托创建于1994年，前身为浙江中南摩托车有限公司，是浙江省历史最悠久的四大骨干摩托车企业之一，具有独立机动车生产资质和出口资质。 2012年经过重组转型，全面取消传统产品线，成立独立重机研发部门与发动机事业部，开始娱乐个性化大排量重型机车与动力系统设计研发。是一家具备整车设计、动力研发、动力制造、整车制造等完整的全流程制造能力的企业。</span>

                    <!-- breadctumb -->
                    
                </div>
            </div>
        </div>
    </section>
    <section id="cd-timeline" class="cd-container">
        <div class="cd-timeline-block" v-for="item in dataList">
            <div class="cd-timeline-img cd-picture">
                <div style="margin:15px auto 0px auto; text-align:center">
                    <i class="fa fa-motorcycle" style=" font-size:30px; color:#fff;"></i>
                </div>

            </div><!-- cd-timeline-img -->

            <div class="cd-timeline-content">
                <h2 style="margin-bottom:0px;">{{item.NewsTitle}}</h2>
                <p style=" font-size:14px;">{{item.NewsTag}}</p>
                <a :href="url+item.Id" class="cd-read-more">查看更多</a>
                @*<span class="cd-date">Jan 14</span>*@
            </div> <!-- cd-timeline-content -->
        </div> <!-- cd-timeline-block -->

    </section>
</div>
 <!-- cd-timeline -->

<script>
    $(function () {
        var $timeline_block = $('.cd-timeline-block');
        //hide timeline blocks which are outside the viewport
        $timeline_block.each(function () {
            if ($(this).offset().top > $(window).scrollTop() + $(window).height() * 0.75) {
                $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
            }
        });
        //on scolling, show/animate timeline blocks when enter the viewport
        $(window).on('scroll', function () {
            $timeline_block.each(function () {
                if ($(this).offset().top <= $(window).scrollTop() + $(window).height() * 0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden')) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
                }
            });
        });
    });
</script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#news",
        data: {
            url: '/News/NewsDetail?id=',
            dataList: [],
            NewsType: '', //类型
            all: 0,//总页数
            pageIndex: 1, //当前页
            pageSize: 6, //每页条数
           

        },
        mounted() {
            this.getReq();//渲染之前
            this.getList(1);//获取数据

        },

        methods: {
            //获取News内容
            getList(pageIndex) {
                var that = this
                $.ajax({
                    type: 'GET',
                    url: '/api/News/GetPageListJson?pageSize=100&pageIndex=1&NewsType=' + this.NewsType,
                    data: {},
                    success: function (res) {
                        that.dataList = res.Result,
                        vm.$forceUpdate();
                       
                     
                    }
                });
            },
            //获取url参数
            getReq() {
                var Requset = new Object;
                Requset = GetRequest();
                this.NewsType = Requset["NewsType"]
                this.pageIndex = Requset["pageIndex"]

                if (this.NewsType == undefined) {
                    this.NewsType = ''
                }
                if (this.pageIndex == undefined) {
                    this.pageIndex = 1
                }
             
            },
           

        },
        created() {

        },
    })
</script>